<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>石门实验中学开放日预约登记</title>
	<script src="__STATIC__/js/jquery-2.1.4.min.js" type="text/javascript"></script>
	<style type="text/css">
		.uploadinput{
			z-index: 2;
		    position: absolute;
		    left: 0;
		    width: 100%;
		    height: 150px;
		    opacity: .01;
		    filter: alpha(opacity=1);
		    cursor: pointer;
		}
	    p{
			padding-right:10px;
			padding-left:10px;
		}
		h4{
			padding-right:10px;
			padding-left:10px;
			padding:12px;
			line-height:12px;
		}
		.text-input{
			border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
		}
	.STYLE1 {color: #FF0000}
    .STYLE2 {font-weight: bold}
    .text-input1 {			border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
}
    .text-input2 {			border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
}
    .text-input3 {			border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
}
    .text-input4 {			border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
}
    .text-input41 {border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
}
    .text-input42 {border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
}
    .text-input43 {border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
}
    .text-input21 {border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
}
    .text-input22 {border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
}
    .text-input421 {border: 1px solid #dfdbdb;
			padding: 5px;
			border-radius: 5px;
}
    </style>
</head>

<body>
    <h2  class="text-center" style='color:blue'>石门实验中学开放日预约登记</h2>
	<form id="yuyueform" method="post" action="">
	<p class="STYLE2"><span class="STYLE1">*</span>1.姓名</p>
	<p>
	  <input name="姓名" type="text" class="text-input" id="姓名"/>
</p>
	<p class="STYLE2"><span class="STYLE1">*</span>2.性别</p>
	<p>
	  <select style="width: 150px;" class="easyui-combobox" name="性别" id="性别" required>
        <option value="">请选择</option>
        <option value="男">男</option>
        <option value="女">女</option>
      </select>
	</p>
	<p class="STYLE2"><span class="STYLE1">*</span>3.身份证号码</p>
	<p>
      <input name="身份证号码" type="text" class="text-input3" id="身份证号码"/>
    </p>
	<p class="STYLE2"><span class="STYLE1">*</span>4.就读小学</p>
	<p>
      <input name="就读小学" type="text" class="text-input4" id="就读小学"/>
    </p>
	<p class="STYLE2"><span class="STYLE1">*</span>5.年级</p>
	<p>
      <input name="年级" type="text" class="text-input41" id="年级"/>
    </p>
	<p class="STYLE2"><span class="STYLE1">*</span>6.联系电话1</p>
	<p>
      <input name="联系电话1" type="text" class="text-input21" id="联系电话1"/>
</p>
	<p class="STYLE2">7.联系电话2</p>
	<p>
      <input name="联系电话2" type="text" class="text-input22" id="联系电话2"/>
    </p>
	<p class="STYLE2">8.特长</p>
	<p>
      <input name="特长" type="text" class="text-input421" id="特长"/>
    </p>
	<p><span class="STYLE2"><span class="STYLE1">*</span>9.自我介绍</span> </p>
	<p>
	  <label>
	  <textarea name="自我介绍" rows="10" id="自我介绍"></textarea>
	  </label>
	</p>
	<p align="center">
	  <input type="button" value="预约" onClick="add()"/>
      </p>
	<div id="result" style="display:none">
	</div>
	</form>
</body>
<script>
	var url = "/kaifangyuyue/yu_yue";
		
	function add() {
		var data = $.serializeObject($("#yuyueform"));
		if(!data.姓名) {
			$.messager.alert('提醒','姓名不能为空','info');
			return false;
		}
		else if(!data.性别) {
			$.messager.alert('提醒','性别不能为空','info');
			return false;
		}
		else if(!data.身份证号码) {
			$.messager.alert('提醒','身份证号不能为空','info');
			return false;
		}
		else if(!data.就读小学) {
			$.messager.alert('提醒','就读小学不能为空','info');
			return false;
		}
		else if(!data.年级) {
			$.messager.alert('提醒','年级不能为空','info');
			return false;
		}
		else if(!data.联系电话1) {
			$.messager.alert('提醒','联系电话1不能为空','info');
			return false;
		}
		else if(!data.自我介绍) {
			$.messager.alert('提醒','自我介绍不能为空','info');
			return false;
		}
		$.ajax({
		   type:"GET",
		   url: url + "/addData",
		   data: data,
		   success: function(resp){
		   	    resp = data;
				var html = "<h4 class='bg-info' style='color:blue'>查询结果：</h4>";
				//判断是否为空对象
				if(!$.isEmptyObject(resp)) {					
					html+="<p>姓名："+resp.姓名+"</p>";
					html+="<p>性别：2020年7月24日"+resp.性别+"</p>";
					html+="<p>身份证号码："+resp.身份证号码+"</p>";
					html+="<p>就读小学："+resp.就读小学+"</p>";
					html+="<p>特长："+resp.特长+"</p>";
					html+="<p>自我介绍："+resp.自我介绍+"</p>";
				}else {
					html+="<p style='color:red'>抱歉！没有找到此电话号码的预约信息，请核对电话号码是否输入正确，或重新预约。</p>";
				}
				html+="</div>"
				$("#result").show();
				$("#result").html(html);
			}
		});
	}
	
	$.serializeObject = function(form) {
		var o = {};
		$.each(form.serializeArray(), function(index) {
			if (o[this['name']]) {
				o[this['name']] = o[this['name']] + "," + this['value'];
			} else {
				o[this['name']] = this['value'];
			}
		});
		return o;
	};
</script>
<p>　</p>
<h4 class='bg-success' style='color:blue'>咨询电话：0757-81209201、81209202</h4>
</html>
